<template>
	<view class="container">
		<view class="balance submitBtn">
			Available Balance
			<view class="num">
				<text>{{info.currency_unit}}</text> {{info.money}}
			</view>
		</view>
		<!-- 基础表单校验 -->
		<uni-forms ref="form" :rules="rules" :modelValue="form" label-position="top" :label-width="300">
			<uni-forms-item label="Bank Account">
				<uni-data-select v-model="form.user_card_id" :localdata="list" v-if="list.length>1" @change="cardChange"
					placeholder="Select bank account"></uni-data-select>
				<view class="selectBank" v-if="card">
					<view class="cardInfo">
						<text class="bankName">{{card.bank_name}}</text>
						<p class="Account">{{card.account_number}} {{card.account_name}}</p>
					</view>
					<view class="btns">
						<navigator :url="`./bank?currency_id=${currency_id}&id=${form.wallet_id}&card_id=`+card.id">
							<uni-icons class="viewBtn" type="compose" color="#FFF" size="26"></uni-icons>
						</navigator>
						<uni-icons @click="del(card)" class="delBtn" type="trash" color="#FFF" size="26"></uni-icons>
					</view>
				</view>
				<!-- </navigator> -->
				<navigator :url="`./bank?currency_id=${currency_id}&wallet_id=${form.wallet_id}`">
					<view class="addBank">
						Add bank account
						<uni-icons type="plus" color="#66D5DA" size="26"></uni-icons>
					</view>
				</navigator>
			</uni-forms-item>
			<uni-forms-item label="Amount" name="amount" required>
				<uni-easyinput class="Amount" type="number" v-model="form.amount" placeholder="Please enter the withdrawal amount" />
				<text class="all" @click="handleAdd">All</text>
			</uni-forms-item>
			<uni-forms-item label="Login Password" name="password" required>
				<uni-easyinput v-model="form.password" type="password" placeholder="Please enter the login password" />
			</uni-forms-item>
		</uni-forms>
		<view class="tips">
			<view class="">
				Terms
			</view>
			<view class="">
				1.The minimum withdraw amount is ₦5000. </view>
			<view class="">
				2. Contact with the bank card owner first if u want to withdraw over 50000₦ in one-time.(Some bank accounts can
				not accept over 50000₦ in one-time ) </view>
			<view class="">
				3.sometimes bank delay, especially during holiday and weekeds, please waitpatiently,if u did not receive money
				within 48 hours,pls contact customer service.they will check and give u solution
			</view>
		</view>
		<view class="submit" @click="submit">
			<view class="btn">
				Withdraw
			</view>
		</view>
		<view class="seat">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					wallet_id: '',
					user_card_id: '',
					amount: '',
					password: '',
				},
				// 校验规则
				rules: {
					amount: {
						rules: [{
							required: true,
							errorMessage: 'required'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: 'required'
						}]
					}
				},
				info: {},
				list: [],
				card:'',
				currency_id:'',
			}
		},
		onLoad(option) {
			this.form.wallet_id = option.id
			this.getInfo()
		},
		onShow() {
			this.getList()
		},
		methods: {
			getInfo(id) {
				this.$post("/user/wallet_info", {
					wallet_id: this.form.wallet_id
				}).then(res => {
					this.info = res.data
					this.currency_id = this.info.currency_id
				})
			},
			getList() {
				this.$post("/user/cards", {
					wallet_id: this.form.wallet_id
				}).then(res => {
					this.list = res.data	
					if(this.list.length > 0)
					{
						this.form.user_card_id = this.list[0].id
						this.card = this.list[0]
					}
					

				})
			},
			cardChange(e){
				let cardInfo = []
				for (var i = 0; i < this.list.length; i++) {
					if(e == this.list[i].id)
					{
						cardInfo = this.list[i]
						break;
					}
				}
				this.card = cardInfo
				
			},
			handleAdd() {
				this.form.amount = this.info.money
			},
			submit() {
				if(!this.form.user_card_id){
					this.$toast("Please select a bank account number")
					return
				}
				this.$refs.form.validate().then(res => {
					this.$post("/user/withdraw", this.form).then(res => {
						this.$toast(res.msg)
						this.getInfo()
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					})
				})
			},
			del(item) {
				uni.showModal({
					title: 'Warning',
					content: 'Do you want to delete it?',
					confirmText:'Confirm',
					cancelText:'Cancel',
					success: function(res) {
						if (res.confirm) {
							this.$post("/user/del_user_card", {
								user_card_id: item.card_id
							}).then(res => {
								this.$toast(res.msg)
								this.getList()
							})
						} else if (res.cancel) {

						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
	}
	.balance {
		font-weight: normal;
		text-align: left;
		line-height: 1.6;
		padding: 40rpx 30rpx;
		font-size: 32rpx;
		margin-bottom: 40rpx;

		.num {
			margin-top: 10rpx;
			font-weight: bold;
			font-size: 56rpx;

			text {
				font-size: 36rpx;
			}
		}
	}
	.selectBtn{
		float: right;
		margin-right: 0rpx;
		margin-top: -80rpx;
	}

	.tips {
		color: #999;
		font-size: 20rpx;
		padding: 10rpx 0;

		text {
			font-weight: bold;
			display: block;
		}
	}

	/deep/ .uni-select {
		margin-bottom: 50rpx;
		border-color: #66D5DA
	}

	.selectBank {
		margin-top: 10rpx;
		padding: 10rpx;
		background: linear-gradient(90deg, #62D8DA, #E851D6);
		color: #fff;
		// border: 2rpx solid #66D5DA;
		// height: 160rpx;
		border-radius: 8rpx;
		font-size: 30rpx;

		.cardInfo {
			width: 90%;
			// height: 100rpx;
			padding: 30rpx;
		}

		.bankName {
			width: 400rpx;
		}

		.Account {
			width: 400rpx;
		}

		.btns {
			display: flex;
			justify-content: end;
			padding-bottom: 20rpx;
			padding-right: 30rpx;

			.delBtn {
				margin-left: 40rpx;
			}
		}



	}

	.addBank {
		margin-top: 20px;
		border: 2rpx solid #66D5DA;
		height: 159rpx;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;

		.uni-icons {
			margin-left: 20rpx;
		}
	}

	.submit {
		height: 128rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -10rpx 10rpx 0rpx rgba(53, 53, 53, 0.04);
		padding: 20rpx 30rpx;
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;

		.btn {
			line-height: 88rpx;
			color: #FFFFFF;
			font-weight: bold;
			text-align: center;
			font-size: 30rpx;
			background: #0C0E27;
			border-radius: 8rpx;
		}
	}

	.all {
		color: #66D5DA;
		position: absolute;
		right: 30rpx;
		font-size: 28rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.Amount {
		/deep/ .content-clear-icon {
			padding-right: 70rpx;
		}
	}

	.seat {
		height: 128rpx;
	}

	/deep/ .is-input-border {
		border-color: #66D5DA !important;
	}

	/deep/ .uni-forms-item__label {
		font-size: 32rpx;
		color: #0C0E27;
	}
</style>